<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 1000px;
        margin: 0 auto;
        /* -----多列布局，用在容器中---- */
        /* 直接设置列数，列宽会自动分配 */
        /* column-count: 4; */
        /* 指定每一列的宽度，会自动计算列数 */
        /* column-width: 250px; */
        /* 复合属性写法,能同时指定列宽和列数（不推荐使用） */
        /* columns: 3 250px; */
        columns: 3;
        /* 调整列间距 */
        column-gap: 30px;

        /* 每一列的边框宽度 */
        /* column-rule-width: 2px;*/
        /* 每一列的边框样式风格 */
        /* column-rule-style: dashed; */
        /* 每一列的边框颜色 */
        /* column-rule-color: red;  */
        /* 边框相关的复合属性写法，columns不能通用，只能单独写 */
        column-rule: 2px dashed red;
      }
      .outer h1 {
        /* -----用在跨列元素上----- */
        /* column-span指定标题是否跨列，all代表跨列,用在跨列元素上 */
        column-span: all;
        text-align: center;
      }
      .outer img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <h1>前端多列布局column用法</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo vel labore
        soluta! Voluptates quas blanditiis natus quasi eos laudantium harum
        placeat, sapiente reiciendis ipsam similique, dicta debitis sunt
        recusandae corrupti! Fuga consectetur doloremque, esse delectus
        voluptates et suscipit obcaecati quae doloribus labore officia
        necessitatibus ipsa ipsam similique laborum. Doloribus iusto impedit
        voluptatem eum, magnam distinctio alias iure quidem culpa, minus fuga!
        Asperiores nostrum similique ad autem officiis eos facere cum est
        debitis unde ratione, illum quis voluptates labore in molestiae aperiam
        vitae mollitia pariatur perspiciatis numquam eaque et sit.
        <img src="../images/mx.png" />
        Natus illo delectus, aut officiis repudiandae ipsa voluptatibus
        distinctio dignissimos voluptatem reprehenderit eius quasi voluptas
        mollitia. Eius nulla, veritatis impedit tempore pariatur dolorum non
        odit expedita voluptate totam, rem delectus eveniet quam temporibus quo
        magnam ipsum earum amet nobis quibusdam itaque. Dicta nam quis sit
        dignissimos, eaque libero suscipit, exercitationem corporis explicabo
        dolores aliquid sint labore? Natus voluptate dolores, vitae ullam quam
        neque corporis dolor saepe similique officia, rem repellendus maiores
        necessitatibus. Ipsa omnis facilis voluptates minus ad dolore
        exercitationem iusto ut dicta? Eaque rerum aliquam incidunt quidem
        laboriosam! Ipsam similique earum dicta officiis error a facere dolores
        sapiente? Nostrum voluptas rem praesentium, ut quasi accusamus, nobis
        atque animi aperiam at beatae sunt voluptatem nemo vel doloremque
        aspernatur veniam ad? Ea ab repellat maxime, sapiente sunt architecto
        numquam molestias cumque officia atque necessitatibus corporis odio
        ullam dolorem. Eveniet accusamus minus, sunt eius fuga totam ab
        recusandae et nesciunt laboriosam vel quod cupiditate sint ipsum
        reprehenderit. Possimus alias laudantium veniam quis beatae fuga ratione
        ipsa placeat, aliquam incidunt eveniet accusantium error dolor! Neque
        laudantium repudiandae porro aspernatur ad asperiores in. Sequi maiores
        asperiores commodi placeat rem delectus non est blanditiis, corrupti
        nesciunt aliquam ullam! Fuga laborum excepturi harum nobis esse
        doloremque obcaecati. Voluptate accusantium explicabo possimus iusto
        quaerat laudantium quam quas reprehenderit.
      </p>
    </div>
  </body>
</html>
